import { RadioGroup } from '@kedacom/react-next'
import { StyledWrap } from './style'
interface LabelRadioGroupProps {
	mainTitle: string
	subTitle: string
	className: string
	value: number
	list: IRadioItem[]
	changeValue: (value: number) => void
}
interface IRadioItem {
	label: string
	value: number
	width?: number
}
/*
const defaultInfo = [
	{
		curVal: configInfo.home_type,
		mainTitle: t('我的主页'),
		subTitle: t('默认主页设置'),
		value: 'HomeType',
		radioList: [
			checkPermission('10000000', SWITCH.homeTab) && { label: t('会议日程'), value: 1 },
			checkPermission('01000000', SWITCH.homeTab) && { label: t('会场管理'), value: 3 },
			checkPermission('00100000', SWITCH.homeTab) &&
				user?.enable_meeting && { label: t('虚拟会议室'), value: 2 },
			checkPermission('00010000', SWITCH.homeTab) && { label: t('会议模板'), value: 4 },
		].filter(Boolean) as { label: string; value: number }[],
	},
	{
		curVal: configInfo.monitor_type,
		mainTitle: t('会议监控'),
		subTitle: t('窗口设置'),
		value: 'MonitorType',
		radioList: [
			{ label: t('默认收起'), value: 1 },
			{ label: t('默认展开'), value: 2 },
		],
		hide: !user?.enable_venue_monitor || !SWITCH.monitor,
	},
	...
]

组件的使用
<LabelRadioGroup
	key={index}
	className={item.className || ''}
	mainTitle={item.mainTitle}
	subTitle={item.subTitle}
	list={item.radioList}
	value={item.curVal}
	changeValue={(val) => handleChange(val, item.value)}
></LabelRadioGroup>
*/
export default function LabelRadioGroup({
	className,
	list,
	value,
	mainTitle,
	subTitle,
	changeValue,
}: LabelRadioGroupProps) {
	const newList = list.map((item) => {
		return {
			width: 150,
			...item,
		}
	})
	return (
		<StyledWrap className={className}>
			<div className="main-title">{mainTitle}</div>
			<div className="options">
				<div className="sub-title">{subTitle}</div>
				<RadioGroup
					direction="row"
					value={value}
					options={newList}
					onChange={(e, value) => {
						changeValue(value)
					}}
				/>
			</div>
		</StyledWrap>
	)
}
